<template>
  <div class="app-container">
    <img src="./backimg.png" alt="" class="img">
    <div ref="chart" style="width:50%;height:376px"></div>
    <div ref="chart2" style="width:50%;height:376px" class="chart2"></div>

  </div>
</template>

<script>
import { mapGetters } from "vuex";
import config from "../../../package.json";
// import * as echarts from "echarts";
import { subjectList } from "@/api/home/home";
import * as echarts from "echarts/core";

export default {
  name: "Dashboard",
  data() {
    return {
      currentRole: "adminDashboard",
      version: config.version,
      charts: ""
    };

    var app = {};
  },
  created() {
    this.subject();
  },
  methods: {
    subject() {
      subjectList().then(response => {
        console.log(response);
      });
    },
    getEchartData() {
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);

        const option = {
          legend: {},
          tooltip: {},
          dataset: {
            source: [
              ["product", "单选题数量", "判断题数量", "选择题数量"],
              ["常识", 43, 85, 93],
              ["C++", 83, 73, 55],
              ["英语", 86, 65, 82],
              ["Java", 72, 53, 39]
            ]
          },
          xAxis: { type: "category" },
          yAxis: {},
          // Declare several bar series, each will be mapped
          // to a column of dataset.source by default.
          series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function() {
          myChart.resize();
        });
      });
    },
    getEchartData2() {
      const chart = this.$refs.chart2;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const option = {
    tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '平均成绩',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '良' },
        { value: 735, name: '优' },
        { value: 580, name: '可' },
        { value: 484, name: ' 不及格' },
        { value: 300, name: '差' }
      ]
    }
  ]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function() {
          myChart.resize();
        });
      });
    }
  },
  mounted() {
    this.getEchartData();
    this.getEchartData2();
  },

  computed: {
    ...mapGetters(["roles", "siteData"])
  },
  created() {}
};
</script>

<style scoped>
.box {
  height: calc(100vh - 120px);
  font-size: 14px;
  line-height: 28px;
}
.title {
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 10px;
  padding-top: 20px;
  margin-bottom: 10px;
  border-bottom: #eee 1px dotted;
}

.tags span {
  margin-right: 10px;
}

.box a {
  color: #20a0ff;
}

.box a:hover {
  color: #ff0000;
}

.chart2 {
  margin-left: 800px;
  margin-top: -300px;
}
.img {
  width: 100%;
  height: 400px;
}
</style>
